<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>图像处理工具 - 便捷工具合集</title>
        <link rel="icon" href="faviconlogo.ico">

        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
        />
        <link rel="stylesheet" href="css/styles.css" />
        <link rel="stylesheet" href="css/image-tools.css" />
    </head>
    <body>
        <!-- 导航栏 -->
      
<nav class="navbar">
    <div class="logo no-wrap">
        <i class="fas fa-toolbox"></i>
        <span>便捷工具合集</span>
    </div>
    <div class="nav-container">
        <ul class="nav-links">
            <li><a href="index.html" class="nav-item no-wrap">首页</a></li>
            <li><a href="calculator.html" class="nav-item no-wrap">计算工具</a></li>
            <li><a href="image-processing.html" class="nav-item no-wrap">图像处理</a></li>
            <li><a href="dev-tools.html" class="nav-item no-wrap">开发工具</a></li>
            <li><a href="life-tools.html" class="nav-item no-wrap">生活工具</a></li>
            <li><a href="404.html" class="nav-item no-wrap">API工具</a></li>

        </ul>
        <div class="nav-actions">
            <button id="sidebarToggle" class="btn mobile-menu-btn">
                <i class="fas fa-bars no-wrap"></i>
            </button>
            <li id="userInfo" style="display: none">
                <span class="username"></span>
                <button onclick="logout()" class="btn logout-btn">
                    <i class="fas fa-sign-out-alt"></i>
                </button>
            </li>
            <li id="login">
                <a href="login.html" class="nav-item active no-wrap login-link"
                    ><i class="fas fa-sign-in-alt"></i>登录</a
                >
            </li>
        </div>
    </div>
</nav>
            <!-- 图片上传区域 -->
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fas fa-upload"></i> 上传图片
                    </h2>
                    <div class="section-tools">
                        <button id="downloadImage" class="btn btn-sm" disabled>
                            <i class="fas fa-download no-wrap"></i> 下载
                        </button>
                        <button id="copyImage" class="btn btn-sm" disabled>
                            <i class="fas fa-copy no-wrap"></i> 复制
                        </button>
                    </div>
                </div>

                <div class="image-upload">
                    <input
                        type="file"
                        id="imageInput"
                        accept="image/*"
                        hidden
                    />
                    <label for="imageInput" class="upload-area" id="uploadArea">
                        <i class="fas fa-cloud-upload-alt fa-3x"></i>
                        <p>点击或拖拽图片到此处</p>
                        <p class="upload-hint">
                            支持 JPG, PNG, GIF, WEBP (最大5MB)
                        </p>
                    </label>
                    <div id="imagePreview" class="image-preview">
                        <div class="preview-placeholder">
                            <i class="fas fa-image fa-4x"></i>
                            <p>图片预览区域</p>
                        </div>
                        <canvas id="imageCanvas"></canvas>
                    </div>
                </div>
            </div>

            <!-- 图片编辑工具 -->
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fas fa-edit"></i> 编辑工具
                    </h2>
                    <div class="section-tools">
                        <button id="undoEdit" class="btn btn-sm" disabled>
                            <i class="fas fa-undo"></i> 撤销
                        </button>
                        <button id="redoEdit" class="btn btn-sm" disabled>
                            <i class="fas fa-redo"></i> 重做
                        </button>
                    </div>
                </div>

                <div class="image-tools">
                    <div class="tool-tabs">
                        <button class="tool-tab active" data-tab="adjust">
                            调整
                        </button>
                        <button class="tool-tab" data-tab="filters">
                            滤镜
                        </button>
                        <button class="tool-tab" data-tab="crop">裁剪</button>
                        <button class="tool-tab" data-tab="text">文字</button>
                    </div>

                    <div class="tool-content">
                        <!-- 调整选项卡 -->
                        <div class="tool-pane active" id="adjustTab">
                            <div class="tool-control">
                                <label
                                    >亮度
                                    <span id="brightnessValue">0</span>%</label
                                >
                                <input
                                    type="range"
                                    id="brightness"
                                    min="-100"
                                    max="100"
                                    value="0"
                                />
                            </div>
                            <div class="tool-control">
                                <label
                                    >对比度
                                    <span id="contrastValue">0</span>%</label
                                >
                                <input
                                    type="range"
                                    id="contrast"
                                    min="-100"
                                    max="100"
                                    value="0"
                                />
                            </div>
                            <div class="tool-control">
                                <label
                                    >饱和度
                                    <span id="saturationValue">0</span>%</label
                                >
                                <input
                                    type="range"
                                    id="saturation"
                                    min="-100"
                                    max="100"
                                    value="0"
                                />
                            </div>
                            <div class="tool-control">
                                <label
                                    >色相 <span id="hueValue">0</span>°</label
                                >
                                <input
                                    type="range"
                                    id="hue"
                                    min="-180"
                                    max="180"
                                    value="0"
                                />
                            </div>
                            <div class="tool-control">
                                <label
                                    >锐化
                                    <span id="sharpenValue">0</span></label
                                >
                                <input
                                    type="range"
                                    id="sharpen"
                                    min="0"
                                    max="100"
                                    value="0"
                                />
                            </div>
                        </div>

                        <!-- 滤镜选项卡 -->
                        <div class="tool-pane" id="filtersTab">
                            <div class="filter-grid">
                                <button class="filter-btn" data-filter="none">
                                    无滤镜
                                </button>
                                <button
                                    class="filter-btn"
                                    data-filter="grayscale"
                                >
                                    灰度
                                </button>
                                <button class="filter-btn" data-filter="sepia">
                                    复古
                                </button>
                                <button class="filter-btn" data-filter="invert">
                                    反色
                                </button>
                                <button class="filter-btn" data-filter="blur">
                                    模糊
                                </button>
                                <button
                                    class="filter-btn"
                                    data-filter="vintage"
                                >
                                    怀旧
                                </button>
                                <button class="filter-btn" data-filter="cool">
                                    冷色调
                                </button>
                                <button class="filter-btn" data-filter="warm">
                                    暖色调
                                </button>
                            </div>
                            <div class="filter-intensity">
                                <label
                                    >滤镜强度
                                    <span id="filterIntensityValue">100</span
                                    >%</label
                                >
                                <input
                                    type="range"
                                    id="filterIntensity"
                                    min="0"
                                    max="100"
                                    value="100"
                                />
                            </div>
                        </div>

                        <!-- 裁剪选项卡 -->
                        <div class="tool-pane" id="cropTab">
                            <div class="crop-controls">
                                <div class="aspect-ratios">
                                    <button
                                        class="aspect-btn active"
                                        data-ratio="free"
                                    >
                                        自由
                                    </button>
                                    <button class="aspect-btn" data-ratio="1:1">
                                        1:1
                                    </button>
                                    <button class="aspect-btn" data-ratio="4:3">
                                        4:3
                                    </button>
                                    <button
                                        class="aspect-btn"
                                        data-ratio="16:9"
                                    >
                                        16:9
                                    </button>
                                    <button
                                        class="aspect-btn"
                                        data-ratio="9:16"
                                    >
                                        9:16
                                    </button>
                                </div>
                                <button id="applyCrop" class="btn">
                                    应用裁剪
                                </button>
                                <button id="cancelCrop" class="btn">
                                    取消裁剪
                                </button>
                            </div>
                        </div>

                        <!-- 文字选项卡 -->
                        <div class="tool-pane" id="textTab">
                            <div class="text-controls">
                                <input
                                    type="text"
                                    id="textInput"
                                    class="form-control"
                                    placeholder="输入要添加的文字"
                                />
                                <div class="text-options">
                                    <input
                                        type="color"
                                        id="textColor"
                                        value="#ffffff"
                                    />
                                    <select id="textFont" class="form-control">
                                        <option value="Arial">Arial</option>
                                        <option value="Times New Roman">
                                            Times New Roman
                                        </option>
                                        <option value="Courier New">
                                            Courier New
                                        </option>
                                        <option value="Georgia">Georgia</option>
                                        <option value="Verdana">Verdana</option>
                                    </select>
                                    <input
                                        type="range"
                                        id="textSize"
                                        min="10"
                                        max="100"
                                        value="24"
                                    />
                                    <button id="addText" class="btn">
                                        添加文字
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="tool-actions">
                        <button id="applyFilters" class="btn btn-primary">
                            <i class="fas fa-check"></i> 应用
                        </button>
                        <button id="resetFilters" class="btn">
                            <i class="fas fa-undo"></i> 重置
                        </button>
                        <button id="saveImage" class="btn">
                            <i class="fas fa-save"></i> 保存
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 页脚 -->
<footer>
    <div class="footer-content">
        <div class="footer-column">
            <h3>在线工具合集</h3>
            <p>提供全面实用的在线工具，助力高效完成各类任务。</p>
            <div class="social-links" style="display: flex; gap: 1rem; margin-top: 1rem">
                <a href="#" style="color: white"><i class="fab fa-facebook fa-lg"></i></a>
                <a href="#" style="color: white"><i class="fab fa-twitter fa-lg"></i></a>
                <a href="#" style="color: white"><i class="fab fa-instagram fa-lg"></i></a>
                <a href="#" style="color: white"><i class="fab fa-github fa-lg"></i></a>
            </div>
        </div>

        <div class="footer-column">
            <h3>工具分类</h3>
            <ul class="footer-links">
                <li><a href="calculator.html"><i class="fas fa-calculator"></i> 计算工具</a></li>
                <li><a href="image-processing.html"><i class="fas fa-image"></i> 图像处理</a></li>
                <li><a href="dev-tools.html"><i class="fas fa-code"></i> 开发工具</a></li>
                <li><a href="life-tools.html"><i class="fas fa-clock"></i> 生活工具</a></li>
                <li><a href="edu-tools.html"><i class="fas fa-book"></i> 教育工具</a></li>
            </ul>
        </div>

        <div class="footer-column">
            <h3>帮助中心</h3>
            <ul class="footer-links">
                <li><a href="#" ><i class="fas fa-question-circle"></i> 常见问题</a></li>
                <li><a href="#" ><i class="fas fa-play-circle"></i> 使用教程</a></li>
                <li><a href="#" ><i class="fas fa-comment"></i> 意见反馈</a></li>
                <li><a href="about.html"><i class="fas fa-envelope"></i> 联系我们</a></li>
            </ul>
        </div>

        <div class="footer-column">
            <h3>订阅更新</h3>
            <p>获取最新工具和功能更新</p>
            <div class="subscribe-form">
                <div class="input-group">
                    <input type="email" placeholder="您的邮箱" class="form-control" />
                    <button class="btn btn-primary">订阅</button>
                </div>
            </div>
        </div>
    </div>

    <div class="copyright">
        <p>&copy; 2025 在线工具合集 - 个人开发者保留所有权利</p>
    </div>
</footer>

        <!-- 引入必要的JS库 -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
        <script src="js/image-tools.js"></script>
        <script src="js/common.js"></script>
        <script src="js/left.js"></script>
    </body>
</html>
